<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
         }
          .con{
              width: 500px;
              height: 800px;
              /* background-color: pink; */
              margin: 0 auto;
          }
          .one{
              width: 500px;
              border: 10px solid rgb(255, 255, 255);
              height: 600px;
              transition: all .6s linear;
          }
          .one img{
              width: 100%;
          }
         .two{
             width: 500px;
             height: 250px;
             /* background-color: lightblue; */
             display: flex;
             justify-content: space-around;
         }
         .two1{
             width: 245px;
             height: 245px;
             position: relative;
             overflow: hidden;
         }
         .two2{
             width: 245px;
             height: 245px;
             position: relative;
             overflow: hidden;
         }
         .two1 img{
             width: 245px;
             height: 245px;

         }
         .two2 img{
             width: 245px;
             height: 245px;
            
         }
         .tz1,.tz2{
             width: 100%;
             height: 100%;
             /* background-color: rgba(0, 0, 0, 0.3); */
             position: absolute;
             top: 0;
             left: -245px;
             padding-top: 50px;
             transition: all .6s linear;
         }
         .tz,.tz0{
            width: 100%;
             height: 100%;
             background-color: rgba(0, 0, 0, 0.3);
             position: absolute;
             top: 0;
             left: 0;
             opacity: 0;
             transition: all .6s linear;
         }
    </style>
</head>
<body>
    <div class="con">
        <div class="one">
            <img src="images/1-1.jpg" alt="">
            <span>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</span>
        </div>
        <div class="two">
            <div class="two1"><img src="images/2-2.jpg" alt="">
                <div class="tz"> <div class="tz1">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</div></div>
           
            </div>
            <div class="two2"><img src="images/3-3.jpg" alt="">
                <div class="tz0"> <div class="tz2">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</div></div>
    </div>
    <script src="jQuery.js"></script>
    <script>
        $('.one').mouseenter(function(){
            $('.one').css({border:'10px solid orange',});
        });
        $('.one').mouseleave(function(){
            $('.one').css({border:'10px solid white',});
        });

        $('.two1').hover(function(){
        $('.tz').css('opacity','1');
    },function(){
        $('.tz').css('opacity','0');
    })
    $('.two1').hover(function(){
        $('.tz1').css('left','0');
    },function(){
        $('.tz1').css('left','-245px');
    })

        $('.two2').hover(function(){
        $('.tz0').css('opacity','1');
    },function(){
        $('.tz0').css('opacity','0');
    })
    $('.two2').hover(function(){
        $('.tz2').css('left','0');
    },function(){
        $('.tz2').css('left','-245px');
    })
    </script>
</body>
</html>